<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Autosize</title>
<style type="text/css">

BODY { font-family: Arial; font-size: small;
background-color: #CCCCFF;}

A:hover {color: red; text-decoration: underline; }


</style>
<script 

src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAYxpy0HiKBWXiyhVrpVqkshTWg_xmhpETXrjHUj59zHLsinrq_xSAmAGIHF6k

Jpo3mJn5WnKDztG7kw"type="text/javascript">
</script>
<script src="elabel.js" type="text/javascript"></script>
</head>
<body onunload="GUnload()">

<span id="zooms">.</span>

<div id="forehead" style="position: absolute; top:0;left:10%;width: 550px; height: 40px"><h2 id="head">Esa's Google 

Maps 

API examples</h2>
</div>


<div id="novel" style="position: absolute; top:60px; left:65%; width:30%; text-align:left">

<h3>Autosize map</h3>
<ul>
<li>Autosizing of the map is a mandatory for mobile devices
<li>You can set a relative map size with v2
<li>Api automatically runs .checkResize() when window resize is noticed
<li>IE does not accept relative height
<li>That is why height is calculated and given in pixels for IE
<li>Try resizing your window

</ul>

<h3>Overview map zoom level</h3>
<ul>
<li>See the top left corner of this page
<li>Zoom levels of main and overview maps are shown and the difference calculated
<li>Resize your window and see how the difference depends on map size
</ul>

<h3>Recommended</h3>
<ul>

<li>
<script type="text/javascript"><!--
google_ad_client = "pub-3649938975494252";
google_ad_width = 180;
google_ad_height = 60;
google_ad_format = "180x60_as_rimg";
google_cpa_choice = "CAAQ24Oy0QEaCGbgW7AaXRokKMu293M";
//--></script>

<script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>

<li>gmapsapiATgmailDOTcom
<li>
<a href="http://koti.mbnet.fi/ojalesa/exam/index.html">Example index</a>

</ul>
</div>


<div id="ads" style="position: absolute; top:90%;left:20px;width:512px; height:60px; ">


<script type="text/javascript"><!--
google_ad_client = "pub-3649938975494252";
google_ad_width = 468;
google_ad_height = 60;
google_ad_format = "468x60_as";
google_ad_type = "text_image";
google_ad_channel ="2676021345";
google_color_border = "CCCCFF";
google_color_bg = "CCCCFF";
google_color_link = "0000CC";
google_color_url = "008000";
google_color_text = "000000";
//--></script>

<script type="text/javascript"
  src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>

</div>

<div id="map" style="position: absolute; top:70px;left:20px;width:512px; height:440px; "></div>

<script type="text/javascript">
//<![CDATA[




////map
      

var map = new GMap2(document.getElementById("map"));
var start = new GLatLng(60.213,24.88);
map.setCenter(start, 14);
map.addControl(new GMapTypeControl(1));
map.addControl(new GLargeMapControl());
map.addControl(new GScaleControl());
map.enableContinuousZoom();
map.enableDoubleClickZoom();
var ovMap=new GOverviewMapControl();
map.addControl(ovMap);
var mini=ovMap.getOverviewMap();


///zoom display

function showZooms(){
var mapZoom=map.getZoom();
var miniZoom=mini.getZoom();
document.getElementById("zooms").innerHTML=mapZoom+"-"+miniZoom+"="+(mapZoom-miniZoom);
}
showZooms();
GEvent.addListener(mini,"move",showZooms);
map.zoomIn();


///check resize


document.getElementById("map").style.top="10%";
document.getElementById("map").style.left="2%";
document.getElementById("map").style.width="60%";

if (window.attachEvent) { 
window.attachEvent("onresize",function(){ //IE
var hght=document.documentElement.clientHeight*0.7;
document.getElementById("map").style.height=hght+"px";
});
} else {
document.getElementById("map").style.height="70%";
window.addEventListener("resize", function() {showZooms()}, false);
}





//]]>

</script>




</body>
</html>


